<script setup lang="ts">
  import { computed, ref, watch } from 'vue'

  const props = defineProps<{
    modelValue: boolean
    size?: 'small' | 'default'
    title?: string
    footerPaddingTop?: number
    footerPaddingLeft?: number
    footerPaddingRight?: number
    footerPaddingBottom?: number
    contentPaddingTop?: number
    contentPaddingLeft?: number
    contentPaddingRight?: number
    contentPaddingBottom?: number
    width?: number | string
  }>()

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'close'): void
  }>()

  // 弹窗的显示状态
  const visible = ref(false)

  const _size = ref('default')

  /**
   * 关闭事件
   */
  const onClose = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
    emits('close')
  }

  const footerStyle = computed(() => {
    const paddingTop = props.footerPaddingTop || 0
    const paddingBottom = props.footerPaddingBottom || 34
    const paddingRight = props.footerPaddingRight || 42
    const paddingLeft = props.footerPaddingLeft || 42
    return `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
  })

  const contentStyle = computed(() => {
    const paddingTop = props.contentPaddingTop || 18
    const paddingBottom = props.contentPaddingBottom || 42
    const paddingRight = props.contentPaddingRight || 42
    const paddingLeft = props.contentPaddingLeft || 42
    return `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
  })

  const modalWidth = computed(() => {
    if (props.width) {
      return props.width
    }

    if (_size.value === 'default') {
      return 650
    }

    return 400
  })

  watch(
    props,
    (value) => {
      visible.value = value.modelValue
      if (['small', 'default'].includes(value.size)) {
        _size.value = value.size
      }
    },
    { immediate: true },
  )
</script>

<template>
  <div>
    <el-dialog
      :title="props.title"
      append-to-body
      draggable
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="visible"
      @close="onClose"
      class="h_modal"
      :width="modalWidth"
      align-center
    >
      <template #header>
        <div class="h_modal_header" v-if="$slots.header">
          <slot name="header"></slot>
        </div>
      </template>
      <div class="h_modal_content" :style="contentStyle">
        <slot></slot>
      </div>
      <template #footer>
        <div
          class="h_modal_footer"
          :style="footerStyle"
          v-if="$slots.footerLeft || $slots.footerRight"
        >
          <div class="left">
            <slot name="footerLeft"></slot>
          </div>
          <div class="right">
            <slot name="footerRight"></slot>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
  .h_modal_footer {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .right {
      display: flex;
      gap: 10px;
    }
  }
</style>
